const HangupSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/hangup.svg'
const CameraOpenSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/camera-open.svg'
const CameraCloseSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/camera-close.svg'
const MicrophoneOpenSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/microphone-open.svg'
const MicrophoneCloseSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/microphone-close.svg'
const SpeakerOpenSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/speaker-open.svg'
const SpeakerCloseSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/speaker-close.svg'
const UpSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/button/mobile/up.svg'
import { MobileUI } from './DefaultUI'

const initialStyle = {
    width: '40px',
    height: '40px',
    shape: 'circle',
    iconSize: 20,
    textColor: '#D5E0F2'
}

const closedButtonUI = {
    microphone: {
        basicConfig: {
            ...initialStyle,
            color: '#FFFFFF',
            iconSrc: MicrophoneOpenSrc
        },
        closedConfig: {
            ...initialStyle,
            color: '#6b758a4d',
            iconSrc: MicrophoneCloseSrc
        }
    },
    speaker: {
        basicConfig: {
            ...initialStyle,
            color: '#FFFFFF',
            iconSrc: SpeakerOpenSrc
        },
        closedConfig: {
            ...initialStyle,
            color: '#6b758a4d',
            iconSrc: SpeakerCloseSrc
        }
    },
    camera: {
        basicConfig: {
            ...initialStyle,
            color: '#FFFFFF',
            iconSrc: CameraOpenSrc
        },
        closedConfig: {
            ...initialStyle,
            color: '#6b758a4d',
            iconSrc: CameraCloseSrc
        }
    },
    hangup: {
        basicConfig: {
            ...initialStyle,
            color: '#ED4651',
            iconSrc: HangupSrc
        },
        loadingConfig: {
            ...initialStyle,
            color: '#ED4651',
            loadingWidth: '20px',
            loadingHeight: '20px'
        }
    },
    toggleButtonPanel: {
        basicConfig: {
            color: 'transparent',
            width: '40px',
            height: '40px',
            shape: 'circle',
            iconSize: 40,
            iconSrc: UpSrc
        }
    }
}

export const closedPanelUI = {
    mobile: {
        ...MobileUI,
        groupCall: {
            video: {
                ...MobileUI.groupCall.video,
                calling: {
                    ...MobileUI.groupCall.video.calling,
                    ...closedButtonUI
                },
                connected: {
                    ...MobileUI.groupCall.video.connected,
                    ...closedButtonUI
                }
            },
            audio: {
                ...MobileUI.groupCall.audio,
                calling: {
                    ...MobileUI.groupCall.audio.calling,
                    ...closedButtonUI
                },
                connected: {
                    ...MobileUI.groupCall.audio.connected,
                    ...closedButtonUI
                }
            }
        }
    }
}
